<template>
    <!-- <h3>题目列表1</h3> -->
   <!-- 表格 -->
   <div class="topic-list">
       <el-table :data="tableData" stripe style="width: 100%">
           <el-table-column prop="index" label="序号" width="70" />
           <el-table-column prop="name" label="试卷名称" width="180" />
           <el-table-column prop="question" label="题目" width="600" />
           <el-table-column prop="answer" label="答案" width="80" />
           <el-table-column prop="score" label="分值" width="100" />
           <el-table-column label="操作">
               <template #default="scope">
                   <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                       删除
                   </el-button>
               </template>
           </el-table-column>
       </el-table>
   </div>
   <!-- 分页器 -->
   <div class="page">
       <!-- layout="prev, pager, next" -->
           <el-pagination
           :page-size="pageSize"
           :pager-count="pageSize"
           :total="totalNum"
           @change="changePageFn"
       />
       </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api/http'

// 表格数据
const tableData = ref<any>([])
const page = ref<number>(1);//默认第一页
const pageSize = ref<number>(11);//数量
const totalNum = ref<number>(50)

// 点击删除题目
const handleDelete = (index: number, row: any) => {
   // console.log(index, row)
    // console.log(index, row)
   // 获取当前点击的选项
   const { tid } = row;
   ElMessageBox.confirm(
       `是否删除这个题目?`,
       '提示',
       {
           distinguishCancelAndClose: true,
           confirmButtonText: '确定',
           cancelButtonText: '取消',
       }
   )
       .then(async () => {
           // console.log("点击确定")
           // 删除题目
           await api.topicRemove({ tid })
               .then(
                   response => {
                       const { data } = response;
                       const{code,msg}= data
                       if (code != 200) {
                           ElMessage.error(msg)
                       }
                   }
               )
           // 删除程序中数组对应的数据
           tableData.value.splice(index, 1);
       })
       .catch(( ) => {
           // console.log("点击取消")
       })
}

// 点击分页
const changePageFn = (value: number)=> {
   // console.log({value})
   page.value = value;
   // 获取第几页的题目列表
   topicItemFn(page.value,pageSize.value);
}

// 获取试卷题目列表
const topicItemFn = async (page: number, pageSize: number)=> {
   await api.topicItems({page,pageSize})
   .then(
       content=>{
           console.log(content);//后台响应的数据
           const {code , result, total} = content.data;
           if(code == 200) {
               // 整合数据完成
               const newArr=  result.map((item: any,i: number)=> {
                   item.index = i + 1;
                   return item
               })
               // 进行这样的赋值，页面就可以做出变化（别忘了，vue是数据双向绑定）
               tableData.value = newArr;
               totalNum.value = total;
           }
       }
   )
}

// 初始化获取题目
topicItemFn(page.value,pageSize.value)

</script>

<style lang="scss">
.topic-list {
   margin-top: 15px;
}
.page {
   margin-top: 15px
}
</style>